<template>
  <div class="foots">
    <div class="foot">
      <div class="sameDiv">
        <div class="top">
          <div class="lines">
            <div class="title">热门产品分类</div>
            <div>中空伺服电机</div>
            <div>中空编码器</div>
            <div>关节减速电机</div>
            <div>机械臂</div>
          </div>
          <div class="lines">
            <div class="title">服务与支持</div>
            <div @click="go('/qa','7-1')">技术支持</div>
            <div @click="go('/download','7-2')">下载中心</div>
            <div @click="go('/customization','7-3')">产品定制</div>
            <div @click="go('/aboutus','7-4')">联系我们</div>
          </div>
          <div class="lines">
            <div class="title">常见问题</div>
            <div @click="go('/qa')">Q&A</div>
          </div>
        </div>

        <div class="bot">
          <div class="left">
            <div class="circle">
              <img src="../assets/logo1.png" alt="">
            </div>
            <span>关于我们</span>
            <span>联系我们</span>
            <span>市场合作</span>
          </div>
          <div></div>
          <div class="right">
            <el-popover placement="top" width="130" trigger="click">
              <img class="ewm" src="../assets/9.png" alt="" srcset="" />
              <div slot="reference" class="circle">
                <img  src="../assets/icon7.png" alt="" srcset="" />
              </div>
            </el-popover>

            <el-popover placement="top" width="130" trigger="click">
              <img class="ewm" src="../assets/9.png" alt="" srcset="" />
              <div slot="reference" class="circle">
                <img  src="../assets/icon6.png" alt="" srcset="" />
              </div>
            </el-popover>
            <el-popover placement="top" width="130" trigger="click">
              <img class="ewm" src="../assets/9.png" alt="" srcset="" />
              <div slot="reference" class="circle">
                <img  src="../assets/icon5.png" alt="" srcset="" />
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
    <div class="footers">
      <div>Copyright @机致科技All Rights Reserved.版权所有</div>
      <div class="same">
        网站备案/许可证号：<a href="http://beian.miit.gov.cn" target="_blank"
          >京ICP备2021001935号-1</a
        >
      </div>

      <div class="same">
        <a
        target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011202003701"
        >
          <img
            class="badge"
            src="../assets/hui.png"
            alt="pic"
          />&nbsp;&nbsp;京公网安备11011202003701号</a
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "footers",
  components: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  methods: {
    go(path,active){
      this.$router.push(path)
      localStorage.setItem('actives',active)
    }
  },
};
</script>

<style lang="scss" scoped>
  .ewm {
    display: block;
    width: 110px !important;
    height: 110px !important;
    margin: 15px auto;
  }
.foots {
  position: relative;
  z-index: 3;


  .footers {
    padding: 50px 0;
    background: #323232;
    text-align: center;
    div,
    a {
      margin-bottom: 8px;
      color: #eeeeee;
      font-size: 14px;
    }
  }
  .foot {
    padding: 60px 0 30px;
    background: #323232;
    border-bottom: 1px solid #6d6e6e;
    .top {
      display: flex;
      .lines {
        flex: 1;
        > div {
          font-size: 16px;
          font-family: FZLTTHK--GBK1, FZLTTHK--GBK1;
          font-weight: normal;
          color: #eeeeee;

          margin-bottom: 20px;
          cursor: pointer;
        }
        .title {
          color: #ffffff;
          font-size: 18px;
          font-weight: bold;
          cursor: inherit;
        }
      }
    }
    .bot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 15px;
      > div {
        flex: 1;
      }
      .left {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
        font-weight: bold;
        color: #eeeeee;
        cursor: pointer;
        span {
          margin-right: 20px;
        }

        .circle {
          width: 82px;
          height: 62px;
          // background: #efefef;
          margin-right: 20px;
        }
      }
      .right {
        display: flex;
        align-items: center;
        .circle {
          img{
            width: 50px;
          height: 50px;
          }
        
          // background: #efefef;
          margin-right: 20px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>